<template>
    <div class="tab-control">
        <!--只有文字不同时，不建议用插槽  -->
        <div :key="item.index" v-for= "(item,index) in titles" class="control-item"
            :class="{active: index === currentIndex}"  @click="clikMove(index)">
               <span>
                    {{item}}
               </span>
        </div>

    </div>
</template>

<script>
export default {
    name:"TabControl",
    props:{
        titles:{
            type:Array,
            default:{
                return:[]
            }
        }
    },
    data() {
        return {
            currentIndex:0
        }
    },
    methods:{
        clikMove(move){
            this.currentIndex = move
        }
    }
    
}
</script>

<style scoped>
.tab-control{
    padding:20px ;
    display: flex;
    text-align: center;
    border-top: 5px solid #eee;
}
.control-item{
    flex: 1;
}
.active{
    color:salmon;
  
}
.active span{
  border-bottom: 3px solid salmon;
  padding: 6px;
}
</style>